<template>
  <div class="ct-cell">
    <component
      v-if="computedType"
      :is="computedComponent"
      v-bind="computedBind"
    ></component>
    <span v-else>{{excuteProps(column.label)}}</span>
  </div>
</template>
<script setup lang="ts">
import {computed, isVNode} from 'vue'
import enumCmp from './components'

type Props = {
  column: ColumnItem
}

const props = withDefaults(defineProps<Props>(), {})

const excuteProps = (prop:any) => {
  if (typeof prop === 'function') {
    return prop()
  } else {
    return prop
  }
}

const computedOptions = computed(() => {
  return props.column.headOptions || ({} as any)
})

/**
 * 组件类型
 */
const computedType = computed(() => {
  return excuteProps(computedOptions.value.type)
})

const computedBind = computed(() => {
  if (isVNode(excuteProps(computedOptions.value.bind))) {
    return {}
  }
  return excuteProps(computedOptions.value.bind) || {}
})

const computedComponent = computed(() => {
  if (computedType.value === 'custom') {
    if (isVNode(excuteProps(computedOptions.value.bind))) {
      return excuteProps(computedOptions.value.bind)
    }
    return computedBind.value.component
  } else {
    return enumCmp[computedType.value]
  }
})

</script>
<style lang="scss" scoped>
.ct-cell {
  display: inline;
}
</style>